<template>
  <div class="chat-wrapper">
    <div class="left">
      <div class="avatar">
        <div
          class="block avatar-img"
          @click="openUserInfo(userInfo, $event)"
        >
          <el-avatar
            shape="square"
            size="medium"
            :src="$utils.getAvatar('avatar.jpg')"
          ></el-avatar>
        </div>
      </div>
      <ul class="side-menu">
        <li
          v-for="i in 4"
          :key="'tools_' + i"
          :style="{'background-position': `0 -${i === 4 ? (i - 1) * (30 - 1) : (i-1) * 28}px`}"
          @click="changeSideTab(i)"
          :class="{'actived': actived === i}"
        ></li>
        <li class="side-menu-item pyq"></li>
      </ul>
      <ul class="side-tools">
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="center">
      <Search :actived="actived" />
      <ChatList
        v-show="actived == 1"
        :default-avatar="$utils.getAvatar()"
        class="chat-list"
      />
      <ContactList v-show="actived == 2" />
    </div>
    <div class="right">
      <ChatWindow />
    </div>
    <UserInfoModal
      :show-info="showInfo"
      :mouse-position="mousePosition"
      :user-data="currentUser"
    />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import UserInfoModal from 'components/Modals/UserInfoModal.vue'
import Search from 'components/Search/Search.vue' // 搜索框
import ChatList from 'components/ChatList/ChatList.vue' // 聊天列表
import userData from './User.json' // 用户数据
import ContactList from 'components/ContactList/ContactList.vue'
import ChatWindow from '@/components/ChatWindow/ChatWindow.vue'

@Component({
  components: {
    UserInfoModal,
    Search,
    ChatList,
    ContactList,
    ChatWindow
  },
})
export default class Chat extends Vue {
  public mousePosition: object = {}
  public currentUser: object = {}
  private iconColor: string = '#9F9F9F'
  private actived: number = 1
  private searchValue: string = ''
  private showInfo: boolean = false
  private userInfo: object = userData.user
  private friendsList: object[] = userData.friends
  private changeSideTab(index: number): void {
    if (index === 4) {
      return
    }
    this.actived = index
  }
  private handleInfoTools(type: number) {
    console.log(type)
  }
  // 打开用户信息弹窗
  private openUserInfo(data: object, event: MouseEvent) {
    this.currentUser = data
    this.showInfo = true
    this.mousePosition = {
      x: event.clientX - event.offsetX + 35,
      y: event.clientY,
    }
    this.$Mask(99, this.clearAlert)
  }
  private clearAlert() {
    this.showInfo = false
    this.currentUser = {}
  }
}
</script>

<style lang="scss" scoped>
.chat-wrapper {
  user-select: none;
  width: 100%;
  height: 100%;
  min-height: 650px;
  background: #fff;
  box-shadow: 1px 1px 6px $box-shadow;
  border-radius: 5px;
  width: 70vw;
  display: flex;
  overflow: hidden;
  .left,
  .center,
  .right {
    height: 100%;
    display: inline-block;
    vertical-align: top;
  }
  .left {
    width: 60px;
    background: $side-nav-bg;
    padding: 25px 0;
    text-align: center;
    position: relative;
    .avatar {
      text-align: center;
      position: relative;
      /deep/.el-avatar {
        img {
          pointer-events: none;
        }
      }
      .avatar-img {
        cursor: pointer;
      }
      .user-info {
        width: 336px;
        height: 267px;
        background-color: #fff;
        position: absolute;
        z-index: 10;
        left: 100%;
        top: 0;
        box-shadow: $shadow;
        border-radius: 8px;
        padding: 0 43px;
        font-size: 14px;
        text-align: left;
        .top,
        .btm {
          height: 50%;
        }
        .top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid $border;
          dt {
            font-size: 22px;
            color: $key-text;
            line-height: 1;
            padding-bottom: 10px;
          }
          dd {
            color: $value-text;
          }
        }
        .btm {
          .region {
            padding: 34px 0 25px;
            .region-key,
            .region-val {
              display: inline-block;
              vertical-align: top;
            }
            .region-key {
              letter-spacing: 17px;
              color: $value-text;
            }
            .region-val {
              color: $key-text;
            }
          }
          .info-tools {
            width: 100%;
            height: 30px;
            padding: 2px 0;
            li {
              height: 30px;
              width: 30px;
              float: right;
              background: url('~assets/images/wechat.png') no-repeat;
              background-position: 0 100%;
              background-size: 150px;
              cursor: pointer;
              &.share {
                background-position-x: 5px;
              }
              &.send-msg {
                background-position-x: -29px;
                margin-left: 36px;
              }
            }
          }
        }
      }
    }
    .side-menu,
    .side-tools {
      padding: 30px 0;
      font-size: 30px;
      li {
        width: 30px;
        height: 30px;
        margin: 30px auto;
        background: url('~assets/images/wechat.png') no-repeat;
        background-position: 0 0;
        background-size: 60px;
        &.actived {
          background-position-x: -30px !important;
        }
        &.pyq {
          background-position: -28px -118px;
        }
      }
    }
    .side-tools {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      li:nth-child(1) {
        background-position: 0px -155px;
      }
      li:nth-child(2) {
        background-position: -30px -155px;
      }
    }
  }
  .center {
    width: 280px;
    background: #f7f7f7;
    border-right: 1px solid #e0e0e0;
    /deep/.el-input__inner {
      background-color: #f3f3f3;
      &:focus {
        border-color: $main-color;
        background-color: #fff;
      }
    }
    .chat-list {
      height: calc(100% - 60px);
    }
  }
  .right {
    flex: 1;
    background: #f3f3f3;
  }
}
</style>
